<template>
	<view class="content">
		<image class="logo" src="https://s3.jpg.cm/2020/11/16/Y4fN6.png" mode="widthFix"></image>
		<view class="title">华鑫集团内部评选 2020 年度机动车驾驶员培训 “优秀教练员” 投票系统</view>
		<view class="tabs-box">
			<u-tabs :list="list" inactive-color="#333" active-color="#ffffff" :current="current" @change="change"></u-tabs>
		</view>
		<view class="coach-box">
			<view class="coach-item" v-for="item in coachList" :key="item.coachId">
				<view class="l">
					<view>{{item.coachName}} <span>({{item.coachSchool}})</span></view>
					<view class="phone">{{item.phoneNum}}</view>
				</view>
				<view class="m">
					当前票数：{{item.voteNum}}
				</view>
				<view class="r">
					<u-button type="success" size="mini" @click="showScoch(item)">为ta投票</u-button>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="14">
			<view class="phone-box">
				<view class="title1">选择投票</view>
				<view class="title-span">
					投给 {{nowCoach.coachName}} ({{nowCoach.coachSchool}})
				</view>
				<view class="input">
					<view class="input-l">手机号</view>
					<u-input class="input-m" v-model="userForm.phoneNum" maxlength="11" placeholder="请输入手机号码" type="number" />
				</view>
				<view class="uni-form-item input">
					<view class="input-l">验证码</view>
					<u-input class="input-m" v-model="userForm.code" maxlength="6" placeholder="验证码" type="number" />
					<view class="input-r" @tap="getCode">{{tips}}</view>
				</view>
				<view class="coach-btn">
					<u-button @click="show=false">取消</u-button>
					<u-button type="success" @click="toupiaoBtn">确认投票</u-button>
				</view>
			</view>
		</u-popup>
		<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange" change-text="验证码发送中(x)"></u-verification-code>
		<u-popup v-model="codeshow" mode="center" border-radius="14">
			<view class="tixing-box">
				<view class="t1">提醒</view>
				<view class="t2">已发送验证码！</view>
				<view class="t3" @click="codeshow=false">确认</view>
			</view>
		</u-popup>
		<u-loadmore status="没有更多了" color="#ffffff" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '全部教练'
					},{
						name: '阳光100'
					}, {
						name: '富兴'
					}, {
						name: '含浦'
					}, {
						name: '开福寺'
					}, {
						name: '文昌阁'
					}, {
						name: '树木岭'
					}, {
						name: '桔园'
					}, {
						name: '泰和'
					}, {
						name: '车站路'
					}, {
						name: '长沙大道'
					}
				],
				current: 0,
				coachList:[],
				pageNum:1,
				schoolName:'',
				show: false,
				codeshow:false,
				tips: '获取验证码',
				seconds: 60,
				wxOpenId: '',
				userForm: {
					code: '',
					phoneNum: ''
				},
				nowCoach:{},
				nowPhone:null
			}
		},
		onLoad() {
			this.getCoachList()
		},
		onReachBottom(e) { 
			if(this.current == 0){
				this.pageNum = this.pageNum+1
				console.log(this.pageNum);
				this.getCoachList1()
			}
		},
		methods: {
			change(index) {
				this.current = index;
				if(this.current==0){
					this.pageNum = 1
					this.getCoachList()
					return
				}
				this.schoolName = this.list[index].name
				this.getOneSchool()
			},
			getOneSchool(){
				this.http_s.request(`coach/get/bySchool?schoolName=${this.schoolName}`,"GET", {})
					.then((res) => {
						console.log(res)
						if (res.data.code == 200) {
							this.coachList = res.data.data.list
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					})
			},
			getCoachList(){
				this.http_s.request(`coach/get?pageNum=${this.pageNum}&pageSize=20`,"GET", {})
					.then((res) => {
						console.log(res)
						if (res.data.code == 200) {
							this.coachList = res.data.data.list
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					})
			},
			getCoachList1(){
				const that = this
				this.http_s.request(`coach/get?pageNum=${this.pageNum}&pageSize=20`,"GET", {})
					.then((res) => {
						console.log(res)
						if (res.data.code == 200) {
							// this.coachList.push()
							for(let i=0;i<res.data.data.list.length;i++){
								that.coachList.push(res.data.data.list[i])
							}
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					})
			},
			showScoch(item){
				this.show = true
				this.nowCoach = item
				this.nowPhone = item.phoneNum
				console.log(item)
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				const that = this;
				if (that.userForm.phoneNum.length == 11) {
					const that = this
					uni.request({
						url: `http://47.112.121.220:7000/pay-serv/sms/v1/coach/vote/pass?phoneNum=${this.userForm.phoneNum}`,
						method: 'GET',
						success: (res) => {
							console.log(res)
						},
						fail: (res) => {
							reject(res)
							uni.hideLoading()
							uni.showToast({
								title: '网络不给力，请稍后再试',
								icon: 'none'
							})
						}
					})
					that.codeshow = true;
					that.$refs.uCode.start();
				} else {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					})
				}
			},
			toupiaoBtn(){
				const that = this
				this.http_s.request(`coach/add/vote?coachId=${this.nowCoach.coachId}&code=${this.userForm.code}&phoneNum=${this.userForm.phoneNum}`,"POST", {})
					.then((res) => {
						console.log(res)
						if (res.data.code == 200) {
							// this.coachList.push()
							uni.showToast({
								title: res.data.msg,
								icon: 'success',
								duration:3000
							})
							that.show = false
							this.pageNum = 1
							this.getCoachList()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EC3F30;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 120rpx;
	}

	.tabs-box {
		width: 100%;
	}

	.title {
		font-size: 28rpx;
		color: #FFFFFF;
		font-weight: bold;
		margin: 30rpx 0 40rpx 0;
		text-align: center;
		width: 80%;
	}

	.logo {
		width: 100%;
	}

	.u-tabs {
		background-color: rgba(0, 0, 0, 0.3) !important;
	}

	.coach-box {
		margin: 40rpx 0;
		padding: 0 30rpx;
		width: 100%;

		.coach-item {
			height: 140rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: rgba(0, 0, 0, 0.2);
			border-radius: 20rpx;
			padding: 0 30rpx;
			color: #FFFFFF;
			font-weight: bold;
			font-size: 30rpx;
			margin-bottom: 14rpx;
			.l{
				flex: 6;
				span{
					font-size: 24rpx;
					font-weight: 500;
					margin-left: 14rpx;
				}
			}
			.m {
				flex: 5;
				font-size: 26rpx;
			}
			.r{
				flex: 3;
			}
			.phone {
				font-size: 24rpx;
				margin-top: 4rpx;
				color: #f9f9f9f;
			}
		}
	}	
	.phone-box {
		.title1{
			margin: 40rpx 0 14rpx 0;
			color: #000;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
		}
		.title-span{
			width: 100%;
			display: flex;
			justify-content: center;
			margin-bottom: 20rpx;
			font-size: 26rpx;
			color: #DD524D;
		}
		width: 650rpx;
		height: 500rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	
		.input {
			height: 100rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #f1f1f1;
			padding: 0 20rpx;
	
			.input-l {
				width: 120rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				margin-right: 20rpx;
			}
	
			.input-m {
				flex: 1;
			}
	
			.input-r {
				font-size: 24rpx;
				color: $main-color;
				margin-left: 20rpx;
			}
		}
		.coach-btn{
			display: flex;
			margin-top: 40rpx;
			.u-btn{
				flex: 1;
				margin: 24rpx;
			}
		}
	}
	
	.loginBtn {
		width: 90%;
		margin-left: 5%;
		height: 90rpx;
		background-image: $main-back;
		font-weight: 900;
		color: #FFFFFF;
		font-weight: 900;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}
	
	.tixing-box {
		width: 610rpx;
		height: 410rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #333;
		padding: 59rpx 0 38rpx 0;
		box-sizing: border-box;
	
		.t1 {
			font-size: 34rpx;
			font-weight: bold;
		}
	
		.t2 {
			margin-top: 61rpx;
			font-size: 30rpx;
			font-weight: 500;
	
		}
	
		.t3 {
			width: 400rpx;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
			font-size: 34rpx;
			font-weight: bold;
			background-image: $main-back;
			border-radius: 10rpx;
			letter-spacing: 4rpx;
			position: absolute;
			bottom: 38rpx;
		}
	}
	
	.uni-form-item {
		display: flex;
		height: 100rpx;
		width: 100%;
		align-items: center;
		background-color: #FFFFFF;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		margin: 10rpx 0;
		position: relative;
		border-radius: 10rpx;
	
		input {
			font-size: 24prx;
			width: 100%;
		}
	
		.fasong {
			position: absolute;
			font-size: 30rpx;
			right: 20rpx;
	
			.weifasong {
				color: #1D96E1;
				font-size: 26rpx;
			}
	
			.yifasong {
				color: #999;
			}
		}
	}
</style>
